@r : 1px;
body{
    overflow-x: hidden;
}
.headWrap {
    height: 56/@r;
    background: #fff;
    .headCont {
        width: 1200/@r;
        height: 56/@r;
        line-height: 56/@r;
        margin: 0 auto;
        .logo {
            margin-left:4%;
            width: 124/@r;
            height: 38/@r;
            margin-top: 9/@r;
        }

        

        .navlist {
            margin-right: 92/@r;
            li {
                float: left;
                width: 120/@r;
                font-size: 16/@r;
                text-align: center;
                font-weight: bold;
                a {
                    color: #333;
                    &.active {
                        color: #B79446;
                       
                    }
                    &:hover {
                        color: #B79446;
                       
                    }
                }
            }
        }


        .btns {
            margin-top: 11/@r;
            a {
                float: left;
                width:56/@r;
                height:32/@r;
                line-height: 32/@r;
                border:1px solid rgba(183,148,70,1);
                color: #B79446;
                text-align: center;
                font-size: 12/@r;
                border-radius: 4/@r;
                &:hover {
                    background: #B79446 ;
                    color:#fff;
                }
                &.register {
                   
                    margin-left: 12/@r;
                }
            }
            

        }


    }
}
.bannerWrap {
    .swiper-button-prev {
        width: 52/@r;
        height: 52/@r;
        background: url(../img/prev.png) no-repeat;
        background-size: cover;
        transition: 0.3s;
        cursor: pointer;
        &:hover {
            background: url(../img/prev_act.png) no-repeat;
            background-size: cover;
        }
    }
    .swiper-button-next {
        width: 52/@r;
        height: 52/@r;
        background: url(../img/next.png) no-repeat;
        background-size: cover;
        &:hover {
            background: url(../img/next_act.png) no-repeat;
            background-size: cover;
        }
    }
    .banner_text {
        position: absolute;
        left: 0;
        top: 0 ;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        letter-spacing: 10/@r;
        p {
            margin: 140/@r 0 10/@r 0;
            font-weight: bold;
            font-size: 22/@r;
           
        }
        span {
            font-size: 18/@r;
        }
    }

}
.swiper-container {
    width: 100%;
    height: 360/@r ;
}
// .swiper-slide {
//     text-align: center;
//     font-size: 18px;
//     background: #fff;

//     /* Center slide text vertically */
//     display: -webkit-box;
//     display: -ms-flexbox;
//     display: -webkit-flex;
//     display: flex;
//     -webkit-box-pack: center;
//     -ms-flex-pack: center;
//     -webkit-justify-content: center;
//     justify-content: center;
//     -webkit-box-align: center;
//     -ms-flex-align: center;
//     -webkit-align-items: center;
//     align-items: center;
//   }
.banner_img {
    width: 100%;
    height: 360/@r;
}

  //文字
  .textWrap {
      width: 994/@r;
      margin:86/@r auto 78/@r auto;
      line-height:48px;
      font-size:18px;
      text-align: center;
  }

  .img_introduce {
      width: 1200/@r;
      margin:80/@r auto ;
     .thumbW {
         position: relative;
         float: left;
         width: 384/@r;
         height: 260/@r;
         transition: 0.3s;
         cursor: pointer;
         &.mar_l {
             margin-left: 24/@r;
         }
         .bg {
             position: absolute;
             left: 0;
             right: 0;
             top:0;
             bottom: 0;
             margin: auto;
             width: 100%;
             height: 100%;
             background: rgba(0,0,0,0.5);
             color: #ddd;
             text-align: center;
             
             
         }

         span {
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
         &:hover {
             transform: translateY(-8/@r) !important;
             
             box-shadow: 0 0 5px rgba(0,0,0,0.5);
             .bg {
                 background-color: rgba(0,0,0,0);
                 color: #fff;
             }

            span {
               top:49% ;
            }
         }
        
         .bor-bottom {
             position: absolute;
             top:60%;
             width:74/@r;
             height:1/@r;
             left:50%;
             transform: translate(-50%,-50%);
             background: #fff;
         }
     } 
  }


  .old_bigImgW {
      width: 100%;
      height: 780/@r;
      background:url(../img/old_bg.png) no-repeat;
      background-size: cover;
      .old_bigContentW {
          width: 1200/@r;
          margin: 0 auto;
      }

    .old_top {
        position: relative;
        width: 100%;
        height: 138/@r;
        line-height: 138/@r;
        margin: 0 auto;
        text-align: center;
        color: #000;
        font-weight: 600;
        background: #F3F1EB;

        .icon {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 36/@r;
          height: 36/@r;
       }
       .icon1 {
           background: url(../img/IZI01.png) no-repeat;
           background-size: cover;
           bottom: -8/@r;
       }
       .icon2 {
          background: url(../img/IZI02.png) no-repeat;
          background-size: cover;
      }
      .icon3 {
          background: url(../img/IZI03.png) no-repeat;
          background-size: cover;
      }
      .icon4 {
          background: url(../img/IZI04.png) no-repeat;
          background-size: cover;
      }
    }
    .old_bottom {
        position: relative;
        height: 260/@r;
        background-color: #fff;
        text-align: center;
        padding: 82/@r 0 0 0;
        .img_icon {
            position: absolute;
            top:114/@r ;
            width: 54/@r;
            height: 65/@r;
            transform: translateY(0px);
            transition: 0.3s;
            &.img_icon_act {
              animation: up_down 2.6s infinite;
              animation-fill-mode: forwards;
              animation-direction :alternate;
            }
        }
        .img_icon1 {
            left: 50%;
            background: url(../img/fl_icon1.png) no-repeat;
            background-size: cover;
            margin-left: -80/@r;
        }
        .img_icon2 {
          left: 76%;
          background: url(../img/fl_icon2.png) no-repeat;
          background-size: cover;
          margin-left: -80/@r;
      }
      .img_icon3 {
          left: 76%;
          background: url(../img/fl_icon3.png) no-repeat;
          background-size: cover;
          margin-left: -80/@r;
      }
      .img_icon4 {
          left: 76%;
          background: url(../img/fl_icon4.png) no-repeat;
          background-size: cover;
          margin-left: -80/@r;
      }

    }
      .old_comW {
          float: left;
          width: 282/@r;
          height: 480/@r;
          margin: 144/@r 0 0 0;
          margin-left: 18/@r;
          cursor: pointer;
          opacity: 1;
          transition: 0.3s;
          &:first-child{
              margin-left: 0;
          }

        &.old_active {
            transform: translateY(-8/@r);
            opacity: 1;
            box-shadow: 0 0 5/@r rgba(0,0,0,0.3); 
        }

        &:hover {

            transform: translateY(-8/@r);
            opacity: 1;
            box-shadow: 0 0 5/@r rgba(0,0,0,0.3);
            .old_bottom {
                .img_icon {
                    animation: up_down 2.6s infinite;
                    animation-fill-mode: forwards;
                    animation-direction :alternate;
                }
            }  
        }

      }
      

  
  }

  @keyframes up_down {
      0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(-15/@r);
      }
  }
  .resourceW {
      background: #fff;
      .title {
          text-align: center;
          padding: 74/@r 0 126/@r 0;
          font-size: 32/@r;
          
      }
      .resource_nav {
          position: relative;
          width: 1200/@r;
          margin:0  auto ;
          text-align: center;
          .comIconW {
              float: left;
              width: 25%;
              cursor: pointer;
              transition: 0.3s;
            
              img {
                  width: 72/@r;
                  height: 72/@r;
              }
              .r_imgIcon {
                display: inline-block;
                width: 72/@r;
                height: 72/@r;
                &.r_imgIcon1 {
                    background: url(../img/TGI01.png) no-repeat 0 0;
                    background-size: cover;
                }
                &.r_imgIcon2 {
                    background: url(../img/TGI02.png) no-repeat 0 0;
                    background-size: cover;
                }
                &.r_imgIcon3 {
                    background: url(../img/TGI03.png) no-repeat 0 0;
                    background-size: cover;
                }
                &.r_imgIcon4 {
                    background: url(../img/TGI04.png) no-repeat 0 0;
                    background-size: cover;
                }
              }
              .bor {
                //   width: 180/@r;
                  display:block;
                  background: #979797;
                  height: 2/@r;
                  margin: 40/@r auto 8/@r auto;
                  
              }
              em {
                  font-size: #000;
                  font-weight: 600;
              }
              &:hover {
                .bor {
                    // width: 180/@r;
                    background: #F2C75B;
                }

                em {
                    color: #F2C75B;
                }

                .r_imgIcon1 {
                    background-position: 0 -72/@r;
                }

                .r_imgIcon2 {
                    background-position: 0 -72/@r;
                }
                .r_imgIcon3 {
                    background-position: 0 -72/@r;
                }
                .r_imgIcon4 {
                    background-position: 0 -72/@r;
                }
             }
          }
          .line {
              position: absolute;
              left: 50%;
              top: 118px;
              width: 92%;
              height: 1px;
              background: #979797;
              margin-left: -46%;
          }
      }
      .rescouce_contentW {
          width: 1142/@r;
          margin: 50/@r auto;
          display: none;
          &.active {
              display: block;
              transition: 0.3s;
          }
          .re_left {
            width: 500/@r;
            margin-top: 80/@r;
            margin-left: 10/@r;
            color: rgba(0,0,0,0.7);
            font-size: 16/@r;
            line-height: 36/@r;
          }
          .re_rightW {
              position: relative;
          }
          .re_right {
              width: 630/@r;
              height: 362/@r;
              transform: translateY(100/@r) scale(0.9);
              transition: 0.3s;
              &.up_active{
                animation: img_up 0.5s forwards;
              }
          }
          .up_img {
              position: absolute;
              left: 0;
              top:0 ;
              width: 630/@r;
              height: 362/@r;
              opacity: 0;
              &.up_img_active{
                animation: img_fade_up 0.5s forwards 0.5s;
              }
          }


      }
  }
 


  .enterBox {
      width: 100%;
      height: 462/@r;
      background: url(../img/dev_bg.png) center center no-repeat;
      background-size: cover;

      .titleBox {
          text-align: center;
          .title {
              padding: 78/@r 0 14/@r 0;
              font-size: 30/@r;
              font-weight: bold;
              color: #000;
          }
          .msg {
              color: rgba(0,0,0,0.4);
              font-size: 16/@r;
          }
      }

      .spiltEnterBox {
          width: 900/@r;
          margin:52/@r auto 0 auto;
          
          li {
              float: left;
              width: 20%;
              transition: 0.3s;


              p {
                  width: 100%;
                  margin: 10/@r 0 0 0;
                  font-size: 16/@r;
                  font-weight: 600;
                
              }
              span {
                  display: inline-block;
                  width: 85%;
                  margin: 6/@r 0 0 0;
                  font-size: 12/@r;
                  color: rgba(0,0,0,0.4);
              }

              &:hover {
                  transform: translateY(-8/@r);
              }
          }
      }
  }

  .serveBox {
      padding: 48/@r 0 72/@r 0;
      background:rgba(246,246,246,1);
      .title {
          padding: 0 0 14/@r 0; 
          color: #000;
          font-size: 40/@r;
          text-align: center;
      }
      .msg {
        color: rgba(0,0,0,0.4);
        font-size: 16/@r;
        text-align: center;
     }

     .splitServerBox {
         width: 1200/@r;
         margin: 0 auto;
         li {
             float: left;
             width: 334/@r;
             height: 192/@r;
             margin-left: 24/@r;
             margin-top: 24/@r;
             padding: 24/@r;
             background:#fff;
             border: 1px solid #fff;
             transition: 0.3s;
             p{
                 margin:66/@r 0 10/@r 0;
                 font-size: #000;
                 font-size: 22/@r;
             }
             .ser_icon {
                 display: inline-block;
                 width: 40/@r ;
                 height: 40/@r ;
             }
             .ser_icon1 {
                background:url(../img/server1.png) no-repeat;
                background-size: cover;
             }
             .ser_icon2 {
                background:url(../img/server2.png) no-repeat;
                background-size: cover;
             }
             .ser_icon3 {
                background:url(../img/server3.png) no-repeat;
                background-size: cover;
             }
             .ser_icon4 {
                background:url(../img/server4.png) no-repeat;
                background-size: cover;
             }
             .ser_icon5 {
                background:url(../img/server5.png) no-repeat;
                background-size: cover;
             }
             .ser_icon6 {
                background:url(../img/server6.png) no-repeat;
                background-size: cover;
             }
             span {
                color: rgba(0,0,0,0.4);
                font-size: 12/@r;
                display: block;
             }
            //  &:hover {
            //      border-color: #E0C581;
            //      box-shadow: 0 0 5/@r rgba(0,0,0,0.1);
            //      .ser_icon1 {
            //         background:url(../img/server1.png) no-repeat blue;
            //         background-size: cover;
            //      }
            //      .ser_icon2 {
            //         background:url(../img/server2.png) no-repeat blue;
            //         background-size: cover;
            //      }
            //      .ser_icon3 {
            //         background:url(../img/server3.png) no-repeat blue;
            //         background-size: cover;
            //      }
            //      .ser_icon4 {
            //         background:url(../img/server4.png) no-repeat blue;
            //         background-size: cover;
            //      }
            //      .ser_icon5 {
            //         background:url(../img/server5.png) no-repeat blue;
            //         background-size: cover;
            //      }
            //      .ser_icon6 {
            //         background:url(../img/server6.png) no-repeat blue;
            //         background-size: cover;
            //      }
            //  }
         }
         .mar_l {
             margin-left: 0;
         }
     }

  }

  .info {
      padding: 30/@r 0;
      text-align: center;
      color: rgba(0,0,0,0.4);
      p{
          margin-top: 8/@r;
      }
  }
  @keyframes img_up {
    0% {
      transform: translateY(100px);
    }
    100% {
      transform: translateY(0);
    }
 }
 @keyframes img_fade_up {
    0% {
      opacity: 0;
      transform: translateY(100px);
    }
    50% {
        opacity: 0.5;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
 }
.move_up {
    animation: move_up 0.5s forwards;
}
 @keyframes move_up {
    0% {
      opacity: 0;
      transform: translateY(100px);
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
 }

@media (max-width: 1280px) {
    .headWrap .headCont {
        // .content_right {
        //     margin-right: 100/@r;
        //  }

       
        .navlist {
            margin-right: 72/@r;
            li {
                float: left;
                width: 100/@r;
                font-size: 16/@r;
                text-align: center;
                // a {
                //     color: #B79446;
                // }
            }
        }
    
    }
	
    .img_introduce {
        margin: 40/@r auto;
       .thumbW {
          transform: scale(0.7)!important;
          &:hover {
            transform: translateY(-8/@r) scale(0.7)!important;
             
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            span {
                top:49% ;
            }
          }
       } 
    }
    .old_bigImgW .old_bigContentW {
        width: 1100/@r;
    }
    .old_bigImgW .old_bottom {
        height: 208/@r;
    }
    .old_bigImgW .old_comW{
        width: 256/@r;
        height: 384/@r;
        .bot_img {
            width: 226/@r;
            height: 180/@r;
        }
        .img_icon {
            width: 44/@r;
            height: 52/@r;
            margin-left: -64/@r;
        }
    }
    .serveBox .splitServerBox li {
        transform: scale(0.8)!important;
    }

}